
class ListTemplate extends React.Component {
	render (){
		var wrapper=this.props.wrapper,
			app=wrapper.props.app,
			isPhone=true,
			router=wrapper.state.router,
			logo=wrapper.state.logo,
			mainTitle=wrapper.state.mainTitle,
			describe=wrapper.state.describe,
			qrCode=wrapper.state.qrCode,
			setting=wrapper.state.setting,
			mixtureMode=wrapper.state.mixtureMode,
			mixtureBackground=wrapper.state.mixtureBackground,
			mixtureColor=wrapper.state.mixtureColor,
			mixtureSpeed=wrapper.state.mixtureSpeed,
			sliderMode=wrapper.state.sliderMode,
			sliderBackground=wrapper.state.sliderBackground,
			sliderColor=wrapper.state.sliderColor,
			sliderSpeed=wrapper.state.sliderSpeed,
			sliderSpeedList=wrapper.sliderSpeedList,
			wallMode=wrapper.state.wallMode,
			wallBackground=wrapper.state.wallBackground,
			wallColor=wrapper.state.wallColor,
			wallSpeed=wrapper.state.wallSpeed,
			wallSpeedList=wrapper.wallSpeedList,
			message=wrapper.state.message,
			actionSheet=wrapper.state.actionSheet,
			confirmOptions=wrapper.state.confirmOptions,
			mainCollection=wrapper.state.mainCollection,
			mainCollectionPure=new CollectionList(_.filter(mainCollection.toJSON(),function(i){ return !i.isVideo})),
			hotCollection=wrapper.state.hotCollection,
			hotCollectionPure=new CollectionList(_.filter(hotCollection.toJSON(),function(i){ return !i.isVideo})),
			isShowPcMenu=true,
			status=wrapper.state.status,
			mainHtml='';

		switch(router){
			case 'mainList':
				mainHtml=mainCollectionPure.length || !app.mainCollection.complete || !isPhone?<ReactClassOne app={app} isPhone={isPhone} collection={mainCollectionPure} message={message} router={router} />:<MainGuide />;
				break;
			case 'mainListHot':
				mainHtml=<ReactClassOne app={app} isPhone={isPhone} collection={hotCollectionPure} message={message} router={router} />;
				break;
			case 'uploadPhoto':
				mainHtml=<UploadPhoto app={app} describe={describe}  qrCode={qrCode} />;
				break;
			case 'adminAuditing':
				var statusCollection=wrapper.state[(status=='approved'?'main':status)+'Collection'];
				statusCollection=new CollectionList(_.filter(statusCollection.toJSON(),function(i){ return !i.isVideo}));
				mainHtml=<MainList app={app} isPhone={isPhone} collection={statusCollection} wallMode={wallMode} wallBackground={wallBackground} wallColor={wallColor} isAuditing={true} message={message} status={status} />;
				break;
			case 'userSetting':
			case 'userSetname':
			case 'checkPhotos':
			case 'adminSetting':
			case 'outlinkList':
				mainHtml=<Setting app={app} isPhone={isPhone} wrapper={wrapper} />;
				break;
		}

		return (
			<div>
				{isShowPcMenu?<Menu app={app} router={router} logo={logo} mainTitle={mainTitle} status={status} isPath={true} />:null}
				{mainHtml}
				<ActionSheet app={app} actionSheet={actionSheet} />
				<ConfirmDialog app={app} options={confirmOptions} />
			</div>
		)
	}
};

/*timeline component*/
class ReactClassOne extends React.Component {
	constructor (props){
        super(props);
        
        this.state = {
            fixNav:false
        }
    }
	handleScroll (){
		var fixNav=this.state.fixNav,
			headerHeight=document.getElementById('timeline-header').offsetHeight,
			bodyScrollTop=document.body.scrollTop,
			isTabReachTop=headerHeight-bodyScrollTop<=0;

		if(fixNav!=isTabReachTop){
			this.setState({
				fixNav:isTabReachTop
			})
		}
	}
	componentDidMount (){
		var self=this;
		
		this.bindScrollEvent();

		setTimeout(function(){
			self.handleScroll()
		})
	}
	componentDidUpdate (){
		this.bindScrollEvent()
	}
	componentWillUnmount (){
		$(window).off('scroll.fixNav')
	}
	bindScrollEvent (){
		var self=this;

		$(window).off('scroll.fixNav').on('scroll.fixNav',function(){
			self.handleScroll()
		})
	}
    render (){
    	var app=this.props.app,
    		router=this.props.router,
    		isPhone=this.props.isPhone,
    		collection=this.props.collection,
			fixNav=this.state.fixNav,
			tabHtml=<ul className={"nav nav-tabs pull-left navStyle col-xs-12 "+(fixNav?"fixednav":"")}>
				<li className={"navStyleLi "+(router=='mainList'?'navStyleLi-active':'')}><a className="liAStyle" href="#home"><b>{i18next.t('home.timeline.last_posts')}</b></a></li>
				<li className={"navStyleLi "+(router=='mainListHot'?'navStyleLi-active':'')}><a className="liAStyle" href="#home-hot"><b>{i18next.t('home.timeline.hot_posts')}</b></a></li>
			</ul>;

		

        return (
            <div className="wrpper" onTouchStart={this.handleScroll.bind(this)}  onTouchMove={this.handleScroll.bind(this)}  onTouchEnd={this.handleScroll.bind(this)}>
				{fixNav?tabHtml:null}
                <div className="main main-Style">
                    <div id="main" className = 'idMainStyle'>
                        {isPhone?<ReactClassTwo />:''}
						<div style={{overflow:'hidden'}}>
							{fixNav?<div style={{height:'18px'}}></div>:tabHtml}
							 <ReactClassThree collection={collection} app={app} router={router} />
						</div>
                    </div>
                </div>
				{isPhone?<Toolbar />:null}
            </div>
        );
    }
};

class ReactClassTwo extends React.Component {
    render (){
    	var bodyWidth=parseInt(document.body.clientWidth),
			param = background.indexOf('?')>0?('&imageView2/3/w/'+bodyWidth):('?imageView2/3/w/'+bodyWidth);

        return (
            <div className="positionStyle" id="timeline-header">
                <div className="col-xs-12 HeightWidth">
                    <div className="panel panel-default headerStyle " style={{backgroundImage:"url("+background+param+")"}}></div>
                    {wallLogo?<img className="wall-logo" src={wallLogo} />:''}
                    <span className="wall-title">{wallDescription}</span>
                </div>
            </div>
        );
    }
};

class ReactClassDataListOne extends React.Component {
    render (){
        var app=this.props.app,
        	model = this.props.model,
        	backboneModel=this.props.backboneModel,
        	index=this.props.index,
        	timeFormat=moment(new Date(_.min([model.timestamp,Date.now()-45000]))).format('YYYY-MM-DD');

        return (
            <li>
                <div className="number">
                    <img className="img-responsive img-around" src="/images/005.png" />
                </div>
                <div className="time">
                    <span className="glyphicon glyphicon-time" aria-hidden="true"></span>
                    {' '+timeFormat}
                </div>
                <div className="content content-style-width">
                	<MainListItem isPhone={true} app={app} model={model} backboneModel={backboneModel} index={index} />
                </div>
            </li>
        );
    }
};

class ReactClassThree extends React.Component {
    render (){
    	var app=this.props.app,
    		router=this.props.router,
    		collection=this.props.collection;

        return (
			<div className="tab-content">
				<div className=" col-xs-12 tab-pane active" style={{padding:'0px'}}>
					<ul className="timeline">
						{collection.models.map(function(i,index) {
							var model=i.toJSON();
							return (<ReactClassDataListOne key={model.id} isPhone={true} app={app} model={model} backboneModel={i} index={index} />);
						})}
					</ul>
				</div>
			</div>
        );
    }
}
